<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app">

        <h1>
            <a name='hello-world' href="#hello-world">
                hello world
            </a>
        </h1>

        <anchored-heading :level="1">
            <a name="title" href="#title">
                hello world 
            </a>
        </anchored-heading>


        <anchored-heading :level="2">
            <a name="title" href="#title">
                hello world 
            </a>
        </anchored-heading>

        <anchored-heading :level="3">
            <a name="title" href="#title">
                hello world 
            </a>
        </anchored-heading>

    </div>


 <template id="zhujian">
        <div>
            <h1 v-if="level===1"><slot></slot> 我是内容一</h1>
            <h1 v-if="level===2"><slot></slot> 我是内容二</h1>
            <h1 v-if="level===3"><slot></slot> 我是内容三</h1>
            <h1 v-if="level===4"><slot></slot> 我是内容四</h1>
            <h1 v-if="level===5"><slot></slot> 我是内容五</h1>
            <h1 v-if="level===6"><slot></slot> 我是内容六</h1>
        </div>
    </template> -->
   <!-- <script>
       Vue.component('anchored-heading',{
           template:'#zhujian',
           props:{
               level:{
                   type:Number,
                   required:true
               }
           }
       })
   </script>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html> --> 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>渲染函数</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        div{
            width: 200px;
            height:200px;
            background: palegoldenrod;
        }
    </style>
</head>

<body>
    <div id="app">
    <h1>
        <a name="hello-world" href="#hello-world">
            hello world!
        </a>
    </h1>
   <br/>
   <hr>
    <!-- <anchored-heading :level='1'> <a name='title' href="#title">hello world</a> </anchored-heading>
    <anchored-heading :level='2'> <a name='title' href="#title">hello world</a> </anchored-heading>
    <anchored-heading :level='3'> <a name='title' href="#title">hello world</a> </anchored-heading> -->
    </div>
 
    <script>
        Vue.component('anchored-heading',{
            // render:function(createElement){
            //     return createElement(
            //         'h'+this.level,//tag name标签名称
            //         this.$slots.default//子组件中的矩阵 就是没有包含v-slot的节点，在上面也就是节点里面的默认内容
            //     )
            // },
            // props:{
            //     level:{

            //         type:Number,
            //         required:true
            //     }
            // }

            render:function(createElement){
                return createElement('div')
            }
        })
    </script>

    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>